<template>
	<div class="table-box">
		<el-card style="margin-bottom: 10px">
			<div class="mt-4 text-sm font-bold">
				{{ competitionData?.name }}
			</div>
		</el-card>
		<proTable
			ref="proTableRef"
			:columns="columns"
			:toolButton="true"
			:requestApi="competitionProjectApi.GetCompetitionProjecListApi"
			:initParam="initParam"
			:dataCallback="dataCallback"
		>
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">添加比赛项目</el-button>
			</template>
			<template #operation="scope">
				<el-space wrap>
					<el-tag @click="openDrawer('编辑', scope.row.id)" style="cursor: pointer" v-if="scope.row.stateStr != '比赛结束'">
						编辑
					</el-tag>
					<el-tag
						@click="handleCloseClick(scope.row)"
						:type="scope.row.stateStr == '已关闭' ? 'success' : 'danger'"
						style="cursor: pointer"
						v-if="scope.row.state < 3"
					>
						{{ scope.row.stateStr == "已关闭" ? "启用" : "关闭" }}
					</el-tag>
					<el-tag
						type="success"
						@click="handleGrouping(scope.row)"
						style="cursor: pointer"
						v-if="scope.row.stateStr == '待分组' || scope.row.stateStr == '待比赛' || scope.row.stateStr == '正在比赛'"
					>
						分组
					</el-tag>
					<el-tag
						type="warning"
						style="cursor: pointer"
						@click="handleEndsignUpClick(scope.row.id)"
						v-if="scope.row.stateStr == '正在报名'"
					>
						结束报名
					</el-tag>
				</el-space>
			</template>
		</proTable>
		<projectDrawer ref="drawerRef" />
	</div>
</template>
<script lang="ts" setup name="logs">
import { ref, reactive, computed } from "vue";
import competitionProjectApi from "@/api/modules/competitionProject";
import competition from "@/api/modules/competition";
import { useRouter, useRoute } from "vue-router";
import { ElNotification } from "element-plus";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import proTable from "@/components/ProTable/index.vue";
import projectDrawer from "./component/projectDrawer.vue";
import { CirclePlus } from "@element-plus/icons-vue";
import { CompetitionData } from "./interface";
const router = useRouter();
const route = useRoute();
// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTableRef = ref();
const competitionData = ref<CompetitionData>();
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	Order: "",
	Sort: "",
	CompetitionId: route.query.id as string
});
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		list: data.data,
		total: data.totalCount
	};
};
// 表格配置项
const columns = computed((): Partial<ColumnProps>[] => {
	let data: Partial<ColumnProps>[] = [
		{ prop: "competitionName", label: "赛事名称" },
		{ prop: "name", label: "项目名称" },
		{ prop: "projectType", label: "项目类型" },
		{ prop: "gameTypeName", label: "比赛类型" },
		{ prop: "calculationRuleContent", label: "成绩规则" },
		{ prop: "punishmentRuleContent", label: "惩罚规则" },
		{ prop: "gameDate", label: "比赛时间" },
		{ prop: "address", label: "比赛地点" },
		{ prop: "money", label: "比赛费用" },
		{ prop: "maxEmployeeNum", label: "参赛最多人数", isShow: false },
		{ prop: "teamMaxUserNum", label: "每组最多人数", isShow: false },
		{ prop: "sensorsMaxNum", label: "每组最多传感器", isShow: false },
		{ prop: "userNum", label: "报名人数" },
		// { prop: "stateStr", tag: true, label: "状态" },
		{
			prop: "state",
			label: "状态",
			tag: true,
			enum: [
				{
					label: "全部",
					value: -1
				},
				{
					label: "已关闭",
					value: 0
				},
				{
					label: "待报名",
					value: 1
				},
				{
					label: "正在报名",
					value: 2
				},
				{
					label: "待分组",
					value: 3
				},
				{
					label: "待比赛",
					value: 4
				},
				{
					label: "正在比赛",
					value: 5
				},
				{
					label: "比赛结束",
					value: 6
				}
			],
			search: { el: "select", props: { filterable: true, ["model-value"]: -1 } }
		},
		{
			prop: "keyWord",
			label: "关键字",
			isShow: false,
			search: { el: "input", props: { placeholder: "请输入比赛项目名称" } }
		},
		{ prop: "operation", label: "操作", width: 240, fixed: "right" }
	];
	return data;
});
const handleGrouping = (row: any) => {
	let gameDate = new Date(row.gameDate.split("～ ")[0]).getTime();
	let nowDate = new Date().getTime();
	if (gameDate - nowDate < 1800000) {
		ElNotification({
			title: "温馨提示",
			message: "此时间段不可分组",
			type: "warning"
		});
		return;
	}
	router.push({
		path: "/competition/eventProject/grouping",
		query: {
			competitionName: competitionData.value?.name,
			competitionId: route.query.id,
			name: row.name,
			id: row.id,
			officialOrBusiness: competitionData.value?.officialOrBusiness
		}
	});
};
// 关闭或者启动项目
const handleCloseClick = async (res: any) => {
	let bool = res.stateStr == "已关闭";
	if (bool) {
		await useHandleData(competitionProjectApi.EnableCompetitionProjectApi, res.id, `启用项目`);
		proTableRef.value.getTableList();
		return;
	}
	await useHandleData(competitionProjectApi.CloseCompetitionProjectApi, res.id, `关闭项目`);
	proTableRef.value.getTableList();
};
// 结束报名
const handleEndsignUpClick = async (id: string) => {
	await useHandleData(competitionProjectApi.EndSignUpApi, id, `结束报名`);
	proTableRef.value.getTableList();
};
// 获取赛事信息
const getCompetitionDetail = async () => {
	let { result } = await competition.GetCompetitionDetailsByIdApi(route.query.id as string);
	let { name, city, chargeType, matchBeginTime, matchEndTime, id, officialOrBusiness } = result.data;
	competitionData.value = { name, city, chargeType, matchBeginTime, matchEndTime, id, officialOrBusiness };
};
getCompetitionDetail();
// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof projectDrawer> | null>(null);
const openDrawer = (title: string, id: string | null = null) => {
	let row: CompetitionData = competitionData.value!;
	const params = {
		title,
		isView: title === "查看",
		row,
		id,
		api: undefined,
		getTableList: proTableRef.value.getTableList
	};
	drawerRef.value?.acceptParams(params);
};
</script>
